<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="../lib/vue/vue_common.jsp"%>
	<title>积分变动记录</title>
	<link rel="stylesheet" href="${ctx}/page/lib/vue/css/mescroll.min.css"/>
	<link rel="stylesheet" href="${ctx}/page/account/css/weibiRecord.css?v=${version}"/>
	<script type="text/javascript" src="${ctx}/page/lib/vue/js/mescroll.min.js"></script>
</head>
<body>
	<div id="app" v-cloak>
		<div id="mescroll" class="mescroll">
			<div class="enq-top">积分余额：<span><fmt:formatNumber type="number" value="${balance}" pattern="0.0000" maxFractionDigits="4"/></span></div>
			<div class="enq-main">
				<div class="enq-con">
					<div class="yecon-top">
						<span class="yecon-lf">时间</span>
						<span class="yecon-cen">来源</span>
						<span class="yecon-rt">金额</span>
					</div>
					<div id="dataList">
						<div class="yecon-main" v-for='item in records'>
							<span class="yecon-lf" >{{item.changeTime | format("yyyy-MM-dd")}}</span>
							<span class="yecon-cen">{{item.changeType}}</span>
							<span class="yecon-rt">
								<template v-if="item.accountRecordType==1">-</template><template v-else>+</template>{{item.changeValue|fixed4}}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				records:null,
				mescroll: null,
			},
			methods: {
				upCallback: function(page) {
					var self = this;
					getListDataFromNet(page.num, page.size, function(data) {
						if(page.num == 1) self.records = [];
						self.records = self.records.concat(data);
						self.balance = data.balance;
						self.mescroll.endSuccess(data.length);
					}, function() {
						self.mescroll.endErr();
					});
				}
			},
			mounted: function() {
				//Page@Start
				var self = this;
				self.mescroll = new MeScroll("mescroll", {
					down: {
						auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
					},
					up: {
						auto: true, 
						callback: self.upCallback, //上拉回调
						page:{size:20},
						empty:{ //配置列表无任何数据的提示
							warpId:"dataList",
						}
					},
				});
				//Page@End
			},
		});
		function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
          	axios.get("getWeiBiAccountTraceData.do", {
				params: {
					pageIndex: pageNum, //页码
					pageSize: pageSize, //每页长度
				}
			}).then(function(response) {
               	successCallback&&successCallback(response.data.items);//成功回调
			}).catch(function(error) {
				errorCallback&&errorCallback()//失败回调
			});
		}
		</script>
	
</body>
</html>